import Vue from 'vue'
import VueRouter from 'vue-router'
import login from '../views/login/login.vue'
import home from '@/views/home/home.vue'
import my from '@/views/home/my'
import find from '@/views/home/find'
// 导入获取token
import { getLocal } from '@/utils/local.js'
// 导入toast
import Toast from 'vant'
// 导入vuex
import store from '@/store/index.js'
// 导入重新获取用户信息
import { apiInfo } from '@/api/login.js'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    component: login
  },
  {
    path: '/home',
    component: home,
    children: [
      {
        path: '/my',
        component: my,
        meta: {
          needLogin: true
        }
      },
      {
        path: '/find',
        component: find
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

// 注册路由守卫
router.beforeEach(async (to, from, next) => {
  // 1.获取到路由元中的信息
  const needLogin = to.meta.needLogin
  // 2.判断
  if (!needLogin) {
    //  不需要登录
    next()
  } else {
    // 需要的登录
    // 3. 判断用户是否存在用户信息  (是否存在token)
    // 获取token
    const token = getLocal('token')
    // 4. 判断token是否存在啊
    if (token) {
      // token存在
      // 判断userInfo是否存在数据
      // 获取userInfo
      const userInfo = store.state.userInfo
      if (userInfo) {
        // userInfo 有 直接下一步
        next()
      } else {
        // 没有  就根据token从服务器中得到用户数据并且保存
        const res = await apiInfo()
        console.log('重新获取用户信息', res)
        // 保存头像
        res.data.avatar = 'http://localhost:1337' + res.data.avatar
        store.commit('setUserInfo', res.data)
        // 继续往下
        next()
      }
    } else {
      // 不存在
      // 提示用户未登录
      Toast.fail('请您先登录')
      // 回到登录页面
      router.push('/login')
    }
  }
})

export default router
